<template>
  <h2>firstName: {{ person.firstName }} lastName: {{ person.lastName }}</h2>
  <h2>fullName: {{ person.fullName }}</h2>
  <input type="text" v-model="person.fullName" />
</template>
<script>
import { reactive, computed } from 'vue'
export default {
  setup() {
    const person = reactive({
      firstName: '朱',
      lastName: '逸之',
    })
    // 计算属性的基本使用
    // 效果上来说，和上面等价
    person.fullName = computed({
      get() {
        return person.firstName + ' ' + person.lastName
      },
      set(newValue) {
        // newValue => 设置的结果 => fullName
        // console.log(newValue)
        const arr = newValue.split(' ')
        person.firstName = arr[0]
        person.lastName = arr[1]
      },
    })
    return {
      person,
    }
  },
}
</script>
